<!--
 * @Author: 老易头 2543548479@qq.com
 * @Date: 2024-10-29 15:10:34
 * @LastEditors: 老易头 2543548479@qq.com
 * @LastEditTime: 2024-10-30 11:16:56
 * @FilePath: \am-dashboard\src\pages\government\components\Left2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Left2" style="width: 100%; height: 100%"></div>
</template>

<script>
import { Pie } from "@antv/g2plot";
import { get } from "@/utils/request";
export default {
  data() {
    return {
      pieData: [],
    };
  },
  async mounted() {
    await this.getDevData();
    await this.initLeft2();
  },
  methods: {
    initLeft2() {
      const piePlot = new Pie("Left2", {
        appendPadding: 10,
        data: this.pieData,
        angleField: "value",
        colorField: "type",
        radius: 0.9,
        label: {
          type: "inner",
          offset: "-30%",
          formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          style: {
            fontSize: 14,
            textAlign: "center",
          },
        },
        interactions: [{ type: "element-active" }],
      });

      piePlot.render();
    },
    async getDevData() {
      let res =  await get("/dashboard/queryDeviceOnlineNumber");
      // console.log(res);
      this.pieData = res.data;
    },
  },
};
</script>

<style scoped>
</style>